<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width=650
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">

    <a-form>
      <a-form-item :label="$t('allMenus')">
        <a-tree
          checkable
          @check="onCheck"
          :checkedKeys="checkedKeys"
          :treeData="treeData"
          @expand="onExpand"
          @select="onTreeNodeSelect"
          :selectedKeys="selectedKeys"
          :expandedKeys="expandedKeysss"
          :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">{{$t('relationship')}}</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">{{$t('cancelAssociation')}}</a-menu-item>
          <a-menu-item key="3" @click="checkALL">{{$t('checkAll')}}</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">{{$t('cancelAll')}}</a-menu-item>
          <a-menu-item key="5" @click="expandAll">{{$t('expandAll')}}</a-menu-item>
          <a-menu-item key="6" @click="closeAll">{{$t('mergeAll')}}</a-menu-item>
        </a-menu>
        <a-button>
          {{$t('treeOperation')}} <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" :cancelText="$t('cancel')">
        <a-button style="margin-right: .8rem">{{$t('cancel')}}</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">{{$t('save')}}</a-button>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">{{ $t('saveAndClose') }}</a-button>
    </div>
  </a-drawer>
</template>

<i18n>
  {
    "zh-CN": {
      "menuConfig":"菜单配置",
      "allMenus":"所拥有的菜单",
      "cancel":"取消",
      "save":"仅保存",
      "saveAndClose":"保存并关闭",
      "treeOperation":"树操作",
      "relationship":"父子关联",
      "cancelAssociation":"取消关联",
      "checkAll":"全部勾选",
      "cancelAll":"取消全选",
      "expandAll":"展开所有",
      "mergeAll":"合并所有"
    },
    "en-US": {
      "menuConfig": "Menu Configuration",
      "allMenus": "All menus",
      "cancel": "Cancel",
      "save": "Save only",
      "saveAndClose":"Save and Close",
      "treeOperation": "Tree operation ",
      "relationship": "Father son relationship",
      "cancelAssociation": "Cancel association",
      "checkAll": "Check All",
      "cancelAll": "Cancel All Selection",
      "expandAll": "Expand All",
      "mergeAll": "Merge All"
    },
    "fr-FR": {
      "menuConfig":"Configuration du menu",
      "allMenus":"Tous les menus",
      "cancel":"Annulation",
      "save":"Sauvegarder uniquement",
      "saveAndClose":"Sauvegarder et fermer",
      "treeOperation":"Opération arbre",
      "relationship":"Association père - fils",
      "cancelAssociation":"Annuler l'Association",
      "checkAll":"Tout cocher",
      "cancelAll":"Annuler toute la sélection",
      "expandAll":"Développer tout",
      "mergeAll":"Fusionner tous"
    }
  }
</i18n>

<script>
  import {queryTreeListForRole,queryRolePermission,saveRolePermission} from '@/api/api'
  import { httpAction, getAction, postAction } from '@/api/manage'
  export default {
    name: "RoleModal",
    components:{
    },
    data(){
      return {
        clientId:"",
        treeData: [],
        defaultCheckedKeys:[],
        checkedKeys:[],
        expandedKeysss:[],
        allTreeKeys:[],
        autoExpandParent: true,
        checkStrictly: true,
        title: this.$t('menuConfig'),
        visible: false,
        loading: false,
        selectedKeys:[],
        url: {
          tree: "/app/menu/tree",
          queryClientMenu: "/app/menu/query-client-menu",
          saveClientMenu: "/app/menu/save-client-menu",
        },
      }
    },
    methods: {
      onTreeNodeSelect(id){
        if(id && id.length>0){
          this.selectedKeys = id
        }
        this.$refs.datarule.show(this.selectedKeys[0],this.clientId)
      },
      onCheck (o) {
        if(this.checkStrictly){
          this.checkedKeys = o.checked;
        }else{
          this.checkedKeys = o
        }
      },
      show(clientId){
        this.clientId=clientId
        this.visible = true;
      },
      close () {
        this.reset()
        this.$emit('close');
        this.visible = false;
      },
      onExpand(expandedKeys){
        this.expandedKeysss = expandedKeys;
        this.autoExpandParent = false
      },
      reset () {
        this.expandedKeysss = []
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.loading = false
      },
      expandAll () {
        this.expandedKeysss = this.allTreeKeys
      },
      closeAll () {
        this.expandedKeysss = []
      },
      checkALL () {
        this.checkedKeys = this.allTreeKeys
      },
      cancelCheckALL () {
        //this.checkedKeys = this.defaultCheckedKeys
        this.checkedKeys = []
      },
      switchCheckStrictly (v) {
        if(v==1){
          this.checkStrictly = false
        }else if(v==2){
          this.checkStrictly = true
        }
      },
      handleCancel () {
        this.close()
      },
      handleSubmit(exit) {
        let that = this;
        let params =  {
          clientId:that.clientId,
          menuIds:that.checkedKeys.join(","),
          lastMenuIds:that.defaultCheckedKeys.join(","),
        };
        that.loading = true;
        postAction(this.url.saveClientMenu, params).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.loading = false;
            if (exit) {
              that.close()
            }
          }else {
            that.$message.error(res.message);
            that.loading = false;
            if (exit) {
              that.close()
            }
          }
          this.loadData();
        })
      },
      loadData(){
        getAction(this.url.tree,{clientId: this.clientId}).then((res) => {
          if (res.success) {
            this.treeData = res.result.treeList
            this.allTreeKeys = res.result.ids
          }
          getAction(this.url.queryClientMenu,{ clientId:this.clientId }).then((res)=>{
              this.checkedKeys = [...res.result];
              this.defaultCheckedKeys = [...res.result];
              this.expandedKeysss = this.allTreeKeys;
          })
        })
      }
    },
  watch: {
    visible () {
      if (this.visible) {
        this.loadData();
      }
    }
  }
  }

</script>
<style lang="less" scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>